﻿@model ByHand.Model.Product

@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var result = ViewBag.Result;
    var providers = ViewData["providers"] as List<ByHand.Model.Provider>;
}
<link href="@Url.Content("/Content/css/jquery-ui-1.10.3.custom.min.css")" rel="stylesheet" media="screen"/>
<link href="@Url.Content("/Content/css/jquery-ui-timepicker-addon.css")" rel="stylesheet" media="screen"/>
<link href="~/Content/plugin/jHtmlarea/style/jHtmlArea.css" rel="stylesheet" />
<div id="provider-error">
</div>
@Html.ActionLink("Return", "Index", "Product", new { }, new { Class = "btn btn-primary" })
@using (Html.BeginForm("Save", "Product", FormMethod.Post, new { id = "product-form", Class = "form-inline", onsubmit = "return validform();" }))
{
    <input type="hidden" name="id" value="@Model.ID" />
    <input type="text" name="name" value="@Model.Title"  placeholder="Title" title="Title" style ="width:180px;" class="form-control"/>
    <select name="provider" style="width: 180px;" class="form-control" title="provider">
        @for (int i = 0; i < providers.Count; i++)
        {
            <option @(Model.ProviderID == providers[i].ID ? "selected='selected'" : "") value="@providers[i].ID">@providers[i].Name</option>
        }
    </select>
    <input type="text" id="product-enddate" name="enddate" title="end date" value="@Model.EndDate" style="width:180px;" class="form-control"/>
    <br />
    <input type="text" name="price" value="@(Model.Price == 0 ? "" : Model.Price.ToString())" placeholder="Price" title="price" style="width:180px;" class="form-control"/>
    <input type="text" name="baseprice" value="@(Model.BasePrice == 0 ? "" : Model.BasePrice.ToString())" placeholder="Base Price" title="base price" style="width:180px;" class="form-control"/>
    <input type="text" name="quantity" value="@(Model.Quantity == 0 ? "" : Model.Quantity.ToString())" placeholder="Quantity" title="quantity" style="width:180px;" class="form-control"/>
   
    <textarea placeholder="Introduction" name="introduction" style="width: 50%; max-width: 100%;" rows="5" class="form-control" title="introduction">@Model.Introduction</textarea>
    <br />
    <textarea placeholder="Description" id="editdescription" name="des" rows="6" style="width: 585px; height: 300px" class="form-control" title="description">@HttpUtility.HtmlDecode(Model.Description)</textarea>
    <br />
    <input type="submit" value="Save" class="btn btn-success" />
}

@{if (Model.ID != 0) { Html.RenderAction("Index", "Upload", new { id = Model.ID, type = 1 }); }}
<script src="@Url.Content("/Content/js/jquery-ui-1.10.3.custom.min.js")")"></script>
<script src="@Url.Content("/Content/js/jquery-ui-timepicker-addon.js")")"></script>
<script src="~/Content/plugin/jHtmlarea/scripts/jHtmlArea-0.7.0.min.js"></script>
<script>
    $('#product-enddate').datetimepicker();
    $('#editdescription').htmlarea({
        // Override/Specify the Toolbar buttons to show
        toolbar: [
            ["bold", "italic", "underline", "|", "forecolor"],
            ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
            ["link", "unlink", "|", "image"],
            [{
                // This is how to add a completely custom Toolbar Button
                css: "custom_disk_button",
                text: "Save",
                action: function (btn) {
                    // 'this' = jHtmlArea object
                    // 'btn' = jQuery object that represents the <A> "anchor" tag for the Toolbar Button
                    alert('SAVE!\n\n' + this.toHtmlString());
                }
            }]
        ],

        // Override any of the toolbarText values - these are the Alt Text / Tooltips shown
        // when the user hovers the mouse over the Toolbar Buttons
        // Here are a couple translated to German, thanks to Google Translate.
        toolbarText: $.extend({}, jHtmlArea.defaultOptions.toolbarText, {
            "bold": "fett",
            "italic": "kursiv",
            "underline": "unterstreichen"
        }),

        // Specify a specific CSS file to use for the Editor
        css: "style//jHtmlArea.Editor.css",

        // Do something once the editor has finished loading
        loaded: function () {
            //// 'this' is equal to the jHtmlArea object
            //alert("jHtmlArea has loaded!");
            //this.showHTMLView(); // show the HTML view once the editor has finished loading
        }
    });
    function displayerror(errortext) {
        var alerthtml = '<div class="alert fade in">' +
                        '<button type="button" class="close" data-dismiss="alert">×</button>' +
                         '<div>' + errortext + '</div>' +
                        '</div>';
        $('#provider-error').html(alerthtml);
    }

    function validform() {
        var name = $('#product-form').find('[name=name]').val();
        var price = $('#product-form').find('[name=price]').val();
        var baseprice = $('#product-form').find('[name=baseprice]').val();
        var quantity = $('#product-form').find('[name=quantity]').val();
        var enddate = $('#product-form').find('[name=enddate]').val();
        if (name.length <= 0) {
            displayerror("Name is required.")
            return false;
        }
        if (price.length <= 0) {
            displayerror("Price is required.")
            return false;
        }
        if (baseprice.length <= 0) {
            displayerror("Base Price is required.")
            return false;
        }
        if (quantity.length <= 0) {
            displayerror("Quantity is required.")
            return false;
        }
        return true;
    }
    var result = '@result';
    if (result != null && result.toString().length > 0) {
        displayerror(result.toString());
    }
</script>
